<template>
  <div class="whatshots">
    <ul class="md-list md-theme-blue">
      <galleryList :listData='homeList.data'></galleryList>
    </ul>
    <md-spinner v-if="homeList.showLoading" class="loading-spinner" :md-size="75" :md-stroke="2" md-indeterminate></md-spinner>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
  computed: {
    ...mapState([
      'homeList'
    ])
  },
  methods: {
    ...mapActions([
      'initWhatsHot'
    ])
  },
  mounted () {
    this.initWhatsHot()
  },
  components: {
    galleryList: require('./galleryList')
  }
}
</script>

<style>
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32.5px;
  margin-top: -32.5px;
}
.whatshots {
  overflow: auto;
}
</style>
